<template>
  <div class="drawer-main-box">
    <el-drawer
      :visible.sync="isDrawer"
      :direction="direction"
      :size="this.$store.state.user.userIsPhone ? '90%' : '30%'"
      :with-header="false"
    >
      <div class="drawer-title">
        <div class="drawer-title">项目详情</div>
        <div class="iconfont icon-guanbi" @click="isDrawer = false"></div>
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>基本信息</div>
      </div>
      <div class="base-box">
        <div class="left-box">
          <div>项目名称：</div>
          <div>功能范围：</div>
        </div>
        <div class="right-box">
          <div>{{ proName }}</div>
          <div>{{ projectData.info ? projectData.info : "无功能" }}</div>
        </div>
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>合同信息</div>
      </div>
      <div class="base-box">
        <div class="left-box">
          <div>签订人：</div>
          <div>签订时间：</div>
          <div>签订金额：</div>
        </div>
        <div class="right-box">
          <div>
            {{
              projectData.contract ? projectData.contract.empname : "暂无数据"
            }}
          </div>
          <div>
            {{
              projectData.contract ? projectData.contract.signtime : "暂无数据"
            }}
          </div>
          <div>
            {{ projectData.contract ? projectData.contract.fee : "暂无数据" }}
            {{ projectData.contract ? "万元" : "" }}
          </div>
        </div>
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>成员信息</div>
        <div>
          <el-date-picker
            size="mini"
            ref="dayChoose"
            v-model="dayData"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
            @change="dayDataChange"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="base-box">
        <div class="left-box">
          <div>在岗人员：</div>
          <div>项目负责人：</div>
        </div>
        <div class="right-box">
          <div>
            {{
              projectData.dutyTeam !== "、、、、" ? projectData.dutyTeam : "无"
            }}
          </div>
          <div>
            {{ projectData.projectmanager ? projectData.projectmanager : "无" }}
          </div>
        </div>
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>里程碑信息</div>
      </div>
      <div class="base-box">
        <div class="left-box">
          <div v-for="(item, index) in projectData.milestones" :key="index">
            {{ item.milestonename }}：
          </div>
        </div>
        <div class="right-box">
          <div v-for="(item, index) in projectData.milestones" :key="index">
            {{ item.milestonetime }}
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getProjectInfoApi,
  getProjectContractApi,
  getProjectTeamApi,
  getProjectMilestonesApi,
  getProjectDutyApi,
  getEmpolyeeListApi,
} from "@/api/index";
export default {
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    projectRow: {
      type: Object,
      default: false,
    },
  },
  data() {
    return {
      // 是否弹出抽屉
      isDrawer: false,
      // 抽屉弹出方向
      direction: "rtl",
      // 项目名称
      proName: "",
      // 基本信息高亮与否
      tageObj: {
        盘煤仪: false,
        无人值守: false,
        数字化料场: false,
        气体检测: false,
        红外检测: false,
      },
      // 控制团队高亮或在岗高亮
      active: 0,
      // 选取的日期
      dayData: new Date(),
      // 展示的日期
      dayArr: [],
      // 折叠栏
      activeName: "1",
      // 项目信息
      projectData: {
        info: null,
        contract: null,
        team: null,
        projectmanager: null,
        dutyTeam: null,
        milestones: [],
      },
      // 人员列表
      perOptions: [],
    };
  },

  mounted() {
    this.initDay();
    this.getEmpolyeeList();
  },

  methods: {
    openDrawer(row) {
      let data = {
        procode: row.procode,
      };
      // 基本信息
      this.getProjectInfo(data);
      // 合同信息
      this.getProjectContract(data);
      // 管理员信息
      this.getDefautTeam(data);
      // 在岗成员
      this.getDutyTeam(data);
      // 里程碑信息
      this.getProjectMilestones(row.procode);
      this.proName = row.proshortname;
      this.isDrawer = true;
    },

    // 获取当前项目的基本情况
    async getProjectInfo(data) {
      let infoRes = await getProjectInfoApi(data);
      let str = "";
      if (infoRes.length) {
        infoRes.forEach((item, index) => {
          let str1 = index === infoRes.length - 1 ? "" : "、";
          str = str + item.fuctionname + str1;
        });
      }
      this.projectData.info = str;
    },

    // 获取当前项目的合同信息
    async getProjectContract(data) {
      let contractRes = await getProjectContractApi(data);
      if (contractRes.length) {
        this.projectData.contract = contractRes[0];
        this.projectData.contract.signtime = this.fixTime(
          contractRes[0].execdate
        );
        // this.projectData.contract.nextbackdate = this.fixTime(
        //   contractRes[0].nextbackdate
        // );
      } else {
        this.projectData.contract = [];
      }
    },

    // 获取人员列表
    async getEmpolyeeList() {
      let res = await getEmpolyeeListApi();
      res.forEach((item, index) => {
        res[index].name = item.empname;
      });
      this.perOptions = [...res];
    },

    // 获取默认在岗人员
    async getDefautTeam(data) {
      let res = await getProjectTeamApi(data);
      if (res.projectmanager) {
        this.projectData.projectmanager = this.perOptions.find((item) => {
          return item.empcode === res.projectmanager;
        }).empname;
      }
      // let arrDefault = res.split("\n");
      // arrDefault.pop();
      // this.projectData.team = this.fixTeamName(arrDefault);
    },

    // 获取当日在岗人员
    async getDutyTeam(data) {
      data.dutydate =
        this.dayArr[0] + "-" + this.dayArr[1] + "-" + this.dayArr[2];
      let res = await getProjectDutyApi(data);
      let arr = res.split("\n");
      this.projectData.dutyTeam = this.fixTeamName(arr);
    },

    // 打开日期选择器
    openDayChoose() {
      this.$refs.dayChoose.handleClickIcon();
    },

    // 选择的日期变化
    dayDataChange(day) {
      let data = {
        procode: this.projectRow.procode,
      };
      this.dayArr = day.split("-");
      this.getDutyTeam(data);
    },

    // 处理成员名称信息
    fixTeamName(arr) {
      let str = "";
      arr.forEach((item, index) => {
        let arr = item.split(":");
        let str1 = index === arr.length ? "" : "、";
        str = str + arr[1] + str1;
      });
      return str;
    },

    // 获取当前项目的里程碑信息
    async getProjectMilestones(code) {
      let data = {
        procode: code,
      };
      let milestoneRes = await getProjectMilestonesApi(data);
      milestoneRes.forEach((item, index) => {
        milestoneRes[index].milestonetime = item.milestonetime.split(" ")[0];
      });
      this.projectData.milestones = milestoneRes;

      console.log("aaaaaa------------>", this.projectData.milestones);
    },

    // 清洗里程碑数据
    finxMilestoneRes(arr) {
      if (arr.length) {
        let resultArr = arr.map((item) => {
          item.milestonetime =
            item.milestonetime.split(" ")[0].split("/")[2] +
            "-" +
            item.milestonetime.split(" ")[0].split("/")[0] +
            "-" +
            item.milestonetime.split(" ")[0].split("/")[1];
          return item;
        });
        return resultArr;
      }
    },

    // 打开日期选择器
    openDayChoose() {
      this.$refs.dayChoose.handleClickIcon();
    },

    // 初始化当前日期
    initDay() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (year < 10) {
        year = "0" + year;
      }
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.dayArr = [year, month, day];
    },

    // 处理时间
    fixTime(str) {
      let arr = str.split("-");
      let str1 = arr[2].slice(0, 2);
      return arr[0] + "-" + arr[1] + "-" + str1;
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer-title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  padding: 5px 5px;
  padding-right: 15px;
  margin-top: 5px;
  margin-left: 5px;
  > div {
    font-weight: bold;
  }
  .icon-guanbi:hover {
    cursor: pointer;
  }
}
.head-box {
  border-bottom: 1px solid #dddcdc;
  height: 30px;
  width: 392px;
  line-height: 30px;
  text-align: start;
  font-size: 13px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-left: 20px;
  display: flex;
  align-items: center;

  .identifier-box {
    height: 10px;
    width: 5px;
    margin-right: 6px;
    background: #11a70c;
  }

  .el-date-editor {
    width: 150px;
    margin-left: 100%;
  }
}

.base-box {
  margin-left: 20px;
  display: flex;

  .left-box,
  .right-box {
    > div {
      /* border: 1px solid red; */
      height: 30px;
      line-height: 30px;
      font-size: 14px;
    }
  }

  .left-box {
    width: 103px;
    text-align: end;
    > div {
      width: 103px;
    }
  }
  .right-box {
    width: 206px;
    text-align: start;
    > div {
      width: 103px;
    }
  }
}
</style>